<template>
  <div class="widget_settings_pro" v-loading="loading">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >
      <template v-slot:skin="skin">
        <div class="box">
          <div class="boxTitle">标题</div>
          <div class="flexBox">
            <div class="inputFlex" :style="{fontFamily: skinStyle1}">{{skinName1}}<span style="padding-left: 4px;">{{skinConfig1}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('1')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">正文</div>
          <div class="flexBox">
            <div class="inputFlex" :style="{fontFamily: skinStyle2}">{{skinName2}}<span style="padding-left: 4px;">{{skinConfig2}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('2')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">按钮</div>
          <div class="flexBox">
            <div class="inputFlex" :style="{fontFamily: skinStyle3}">{{skinName3}}<span style="padding-left: 4px;">{{skinConfig3}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('3')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">商品标题</div>
          <div class="flexBox">
            <div class="inputFlex" :style="{fontFamily: skinStyle4}">{{skinName4}}<span style="padding-left: 4px;">{{skinConfig4}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('4')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>

      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>

    <el-dialog title="字体选择" :visible.sync="dialogVisible" :append-to-body="true">
      <div class="search-list">
          <el-form ref="form" class="search-table-form" :model="fontList" label-width="90px" size="small"
                   style="background: #fff;padding: 10px">
            <div style="display: flex;align-items: center">
              <el-form-item label="字体名：" style="margin-bottom: 0;margin-right: 20px">
                <el-input v-model="fontList.seriesName" placeholder="请输入" style="width: 100%"></el-input>
              </el-form-item>
              <div style="display: flex;align-items: center">
                <el-button size="small" type="primary" @click="handleSearch">搜索查询</el-button>
              </div>
            </div>
          </el-form>
      </div>
      <el-table :data="tableData" ref="listTable" style="width: 100%" size="mini"
                highlight-current-row
                :cell-style="setCellStyle"
                @row-click="getDefaultFontMsg">
                <el-table-column label="" width="50px">
                  <template slot-scope="scope">
                    <el-radio class="no-label"
                              v-model="typeName"
                              :label="scope.row.name"
                              :key="'radio' + scope.$index"
                              @change="currentRow(scope.$index, scope.row)">{{scope.row.name}}</el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="字体名称" />
                <el-table-column prop="variants" header-align="center" align="center" label="配置">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.configurationChecked"
                               @change="getDefaultFontMsg(scope.row,scope.$index)"
                               placeholder="请选择"
                               value-key="index">
                      <el-option v-for="(item,index) in scope.row.variants"
                                 :key="index"
                                 :label="item.styleName"
                                 :value="item.styleName"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProductList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {commonFont} from '@/api/theme';
import {debounce, deepClone} from '@/utils/utils';
import font from '@/utils/font';
export default {
    name: 'globalFontForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            loading: false,
            skinName1: '',
            skinName2: '',
            skinName3: '',
            skinName4: '',
            skinConfig1: '',
            skinConfig2: '',
            skinConfig3: '',
            skinConfig4: '',
            skinStyle1: {}, // 这里字体展示样式还没完善
            skinStyle2: {},
            skinStyle3: {},
            skinStyle4: {},
            fontList: {
                seriesName: ''
            },
            dialogVisible: false,
            tableData: [],
            tableDataBase: [],
            typeName: '',
            typeChecked: '',
            typeHandle: '',
            typeIndex: '1',
            typeStyle: '',
            pageCount: 1,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            sections: [
                {
                    title: '字体类型',
                    formDesc: {
                        skin: {}
                    }
                },
                {
                    title: '字号',
                    formDesc: {
                        'skin_title_font_size': {
                            type: 'slider',
                            label: () => { return `标题  ${this.formData.skin_title_font_size}px`; },
                            attrs: {
                                min: 16,
                                max: 60
                            }
                        },
                        'skin_mobile_title_font_size': {
                            type: 'slider',
                            label: () => { return `移动端标题  ${this.formData.skin_mobile_title_font_size}px`; },
                            attrs: {
                                min: 16,
                                max: 60
                            }
                        },
                        'skin_product_header_font_size': {
                            type: 'slider',
                            label: () => { return `商品标题  ${this.formData.skin_product_header_font_size}px`; },
                            attrs: {
                                min: 12,
                                max: 34
                            }
                        },
                        'skin_price_font_size': {
                            type: 'slider',
                            label: () => { return `现价  ${this.formData.skin_price_font_size}px`; },
                            attrs: {
                                min: 12,
                                max: 34
                            }
                        },
                        'skin_compare_at_price_font_size': {
                            type: 'slider',
                            label: () => { return `原价  ${this.formData.skin_compare_at_price_font_size}px`; },
                            attrs: {
                                min: 12,
                                max: 34
                            }
                        },
                        'skin_word_space': {
                            type: 'slider',
                            label: () => { return `单词间距  ${this.formData.skin_word_space}px`; },
                            attrs: {
                                min: 0,
                                max: 24
                            }
                        }
                    }
                }
            ]
        };
    },
    created () {
        this.initData();
    },
    methods: {
        initData () {
            this.loading = true;
            // commonFont().then(res => {
            this.tableData = font.data;
            console.log(this.tableData);
            const fonts = [];
            this.tableData.map(cc => cc.variants).forEach(dd => dd.map(ee => this.setFontFace(ee.details['font_face'])));
            this.tableDataBase = deepClone(font.data);
            this.handleShowDefaultCheckedList();
            this.loading = false;
            // }).catch((e) => {
            //     this.loading = false;
            // });
        },
        setFontFace (data) {
            const ele = document.createElement('div');
            const style = `<style>${data}</style>`;
            ele.innerHTML = style;
            document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild);
        },
        handleShowDefaultCheckedList () {
            for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].configurationChecked = this.tableData[i].variants[0].styleName;
                this.tableData[i].styleFonts = this.tableData[i].variants[0].details.font_face;

                for (let j = 0; j < this.tableData[i].variants.length; j++) {
                    if (this.tableData[i].variants[j].handle === this.formData.skin_title_font_family) {
                        this.skinName1 = this.tableData[i].variants[j].name; // 默认右侧栏的字和样式
                        this.skinConfig1 = this.tableData[i].variants[j].styleName;
                        this.skinStyle1 = this.tableData[i].variants[j].details.family;
                        console.log(100, this.skinStyle1);
                    }
                    if (this.tableData[i].variants[j].handle === this.formData.skin_text_font_family) {
                        this.skinName2 = this.tableData[i].variants[j].name;
                        this.skinConfig2 = this.tableData[i].variants[j].styleName;
                        this.skinStyle2 = this.tableData[i].variants[j].details.family;
                    }
                    if (this.tableData[i].variants[j].handle === this.formData.skin_btn_font_family) {
                        this.skinName3 = this.tableData[i].variants[j].name;
                        this.skinConfig3 = this.tableData[i].variants[j].styleName;
                        this.skinStyle3 = this.tableData[i].variants[j].details.family;
                    }
                    if (this.tableData[i].variants[j].handle === this.formData.skin_product_header_font_family) {
                        this.skinName4 = this.tableData[i].variants[j].name;
                        this.skinConfig4 = this.tableData[i].variants[j].styleName;
                        this.skinStyle4 = this.tableData[i].variants[j].details.family; // 样式绑定可能有问题
                    }
                }
            }
        },
        handleShowDialog (index) {
            this.typeIndex = index;
            if (index === '1') {
                this.typeName = this.skinName1;
            } else if (index === '2') {
                this.typeName = this.skinName2;
            } else if (index === '3') {
                this.typeName = this.skinName3;
            } else {
                this.typeName = this.skinName4;
            }
            this.dialogVisible = true;
        },
        saveProductList () {
            this[`skinName${this.typeIndex}`] = this.typeName;
            this[`skinConfig${this.typeIndex}`] = this.typeChecked;
            this[`skinStyle${this.typeIndex}`] = this.typeStyle;

            if (this.typeIndex === '1') {
                this.formData.skin_title_font_family = this.typeHandle;
            }
            if (this.typeIndex === '2') {
                this.formData.skin_text_font_family = this.typeHandle;
            }
            if (this.typeIndex === '3') {
                this.formData.skin_btn_font_family = this.typeHandle;
            }
            if (this.typeIndex === '4') {
                this.formData.skin_product_header_font_family = this.typeHandle;
            }
            // this.setData();
            this.dialogVisible = false;
            this.handleShowDefaultCheckedList();
        },
        currentRow (index, row) {
            this.typeName = row.name;
        },
        setCellStyle ({rowIndex, columnIndex}) {
            if (columnIndex === 1) {
                if (rowIndex === 46) {
                    const obj = this.tableData[rowIndex].variants.find(item => item.styleName === this.tableData[rowIndex].configurationChecked);
                    return `font-family: ${obj.details.family};
                ${this.tableData[rowIndex].styleFonts}`;
                } else {
                    return `font-family: ${this.tableData[rowIndex].name};
                ${this.tableData[rowIndex].styleFonts}`;
                }
            }
        },
        getDefaultFontMsg (row, index) {
            let i = this.tableData.findIndex((item) => item === row);
            let j = row.variants.filter(function (item) { return item.styleName === row.configurationChecked; })[0];
            this.tableData[i].styleFonts = j.details.font_face;
            this.setCellStyle(i, 1);
            row.variants = [...row.variants];
            this.typeName = row.name;
            this.typeChecked = row.configurationChecked;
            this.typeHandle = j.handle;
            this.typeStyle = row.variants.find(res => res.styleName === this.typeChecked).details.font_face;
        },
        handleSubmit (data) {
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600),
        handleSearch () {
            let that = this;
            this.tableData = this.tableDataBase;
            this.tableData = this.tableData.filter(function (item) { return item.name.toUpperCase().indexOf(that.fontList.seriesName.toUpperCase()) !== -1; });
            this.handleShowDefaultCheckedList();
        },
        handleRest () {
            this.formParams = {
                name: '',
                page: 1,
                pageSize: 20,
                status: 'unfinished'
            };
            this.initData();
        }
    },
    mounted () {
        if (!('skin_mobile_title_font_size' in this.formData)) {
            this.$set(this.formData, 'skin_mobile_title_font_size', 34);
        }
    }
};
</script>

<style scoped lang="scss">
.box {
  height: 94px;
  .boxTitle {
    height: 42px;
  }
  .flexBox {
    width: 248px;
    height: 42px;
    display: flex;
    border-radius: 2px;
    background-color: #eef0f2;
    padding: 0 10px;
    .inputFlex {
      flex: 5;
    }
    .buttonFlex {
      flex: 1;
    }
  }
}
</style>

<style lang="scss">
.el-dialog__body {
  height: 600px;
  overflow: scroll;
}
.no-label .el-radio__label {
  display: inline-block;
}
.radioText {
  padding-left: 5px;
}
</style>
